<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的班级</title>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

    <link rel="stylesheet" href="../js/libs/sui/sm.min.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <link rel="stylesheet" href="../less/main.css"/>

    <script type="text/javascript" src='../js/libs/jquery-3.1.0.min.js' charset='utf-8'></script>
    <script type="text/javascript">
        var Zepto = jQuery;
    </script>
    <script type="text/javascript" src='../js/libs/sui/sm.js' charset='utf-8'></script>
    <script type="text/javascript" src="../js/libs/juicer-min.js"></script>
    <script type="text/javascript" src="../js/libs/jquery.md5.js"></script>
    <script type="text/javascript" src="../js/api.js"></script>
    <script type="text/javascript" src="../js/utils.js"></script>
    <script type="text/javascript" src="../js/common.js"></script>
</head>
<body>
<!-- 这里是页面内容区 -->
<div class="content native-scroll bg-white p-t22">
    <!--我的班级-->
    <!-- 头部-->
    <div class="head-no-toolbar bg-self-green no-left-icon">
        <span class="icon iconfont c-white p-l" onclick="javascript:api.closeWin();">&#xe61f;</span>
        <span class="c-white t-center">我的班级</span>
    </div>

    <!-- 班级卡片组件-->
    <div id="my-class-list">
        <!--<div class="class-card">-->
            <!--<div class="item-title-row">-->
                <!--<div class="item-title">Web工程师培训班</div>-->
                <!--<div class="item-after">56人</div>-->
            <!--</div>-->
            <!--<div class="item-content">-->
                <!--<div class="item-left">-->
                    <!--<span class="iconfont icon">&#xe609;</span>-->
                    <!--<span>课程表</span>-->
                <!--</div>-->
                <!--<div class="item-right">-->
                    <!--<span class="iconfont icon">&#xe60d;</span>-->
                    <!--<span>同学会</span>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
        <!--<div class="class-card">-->
            <!--<div class="item-title-row">-->
                <!--<div class="item-title">Web工程师培训班</div>-->
                <!--<div class="item-after">56人</div>-->
            <!--</div>-->
            <!--<div class="item-content">-->
                <!--<div class="item-left">-->
                    <!--<i class="iconfont icon">&#xe609;</i>-->
                    <!--<span>课程表</span>-->
                <!--</div>-->
                <!--<div class="item-right">-->
                    <!--<i class="iconfont icon">&#xe60d;</i>-->
                    <!--<span>同学会</span>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
    </div>
</div>
<!--班级模板-->
<script id="my-class-tpl" type="text/template">
    {@each classList as it,index}
    <div class="class-card">
        <div class="item-title-row">
            <div class="item-title">&{it.CLASS_NAME}</div>
            <div class="item-after">&{it.CLASS_PEOPLE}人</div>
        </div>
        <div class="item-content">
            <div data-table-id="&{it.CLASS_ID}" data-table-name="&{it.CLASS_NAME}" class="item-left">
                <span class="iconfont icon">&#xe609;</span>
                <span>课程表</span>
            </div>
            <div data-table-id="&{it.CLASS_ID}" class="item-right" data-table-name="&{it.CLASS_NAME}">
                <span class="iconfont icon">&#xe60d;</span>
                <span>同学会</span>
            </div>
        </div>
    </div>
    {@/each}
</script>

<script>
    apiready = function () {
        juicer.set({
            'tag::operationOpen': '{@',
            'tag::operationClose': '}',
            'tag::interpolateOpen': '&{',
            'tag::interpolateClose': '}',
            'tag::noneencodeOpen': '$${',
            'tag::noneencodeClose': '}',
            'tag::commentOpen': '{#',
            'tag::commentClose': '}',
            'strip': false,
            'cache': false
        });

        // 学生信息
        var stuInfo = getLoginStudentInfo();
        // 融云 Token
        var rongcloudToken = null;

        if (isObject(stuInfo)) {
            var classsql = "SELECT " +
                    "s2.STUDENT_ID," +
                    "s2.CLASS_ID," +
                    "s1.CLASS_NAME," +
                    "(SELECT count(*) FROM s_student_class where CLASS_ID=s2.CLASS_ID) CLASS_PEOPLE" +
                    " FROM " +
                    "b_class s1," +
                    "(SELECT STUDENT_ID,CLASS_ID FROM s_student_class  WHERE STUDENT_ID = '{0}') s2" +
                    " WHERE " +
                    "s1.CLASS_ID = s2.CLASS_ID";

            dbQuery(1, 10, classsql.format(stuInfo.STUDENT_ID), true, function (ret, err) {
                if (isObject(ret) && ret.statusCode == 0) {

                    if(ret.result.length>0){

                        var classData = {classList: ret.result};
                        var classTpl = document.getElementById("my-class-tpl").innerHTML;
                        var classHtml = juicer(classTpl, classData);
                        $("#my-class-list").html(classHtml);
                    }else{
                        toast("暂无数据");
                    }
                }else{
                    toast("查询数据失败");
                }
            });
        }

        // 课程表
        $("#my-class-list").on("click", ".item-left", function () {
            var $this = $(this);
            var tableId = $this.data("tableId");
            var tableName = $this.data("tableName");

            openWin("class-table", "class-table.html", {
                tableId: tableId,
                tableName: tableName
            });
        });

        // 同学会
        $("#my-class-list").on("click", ".item-right", function () {
            var $this = $(this);

            openWin("class-mates", "class-mates.html", {
                tableId: $this.data("tableId"),
                tableName : $this.data("tableName")
            });
        });
    };
</script>
</body>
</html>
